<!DOCTYPE html>
<html lang="en">
<head>
    <!--issue
    （solved）文本框输入后，没有实时更新，num数据，只能再次点击才能生效！！！

    新学：
    @blur 是当元素失去焦点时所触发的事件
    @focus 是元素获取焦点时所触发的事件
    @change 是元素中 "值发生改变" 且 "失焦" 时所触发的事件
    -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE组件版-计算器</title>
</head>
<body>
    <main id="app">
        <!-- //插槽 -->
        <ame>{{msg}}</ame>
        <cal-box></cal-box>
    </main>
    
    <script src="vue.js"></script>
    <script>
        
        Vue.component('ame',{
            // props:[,],
            template:`
            <h1>
                <!-- //插槽 -->
                <slot></slot>
            </h1>
            `,
        });

        Vue.component('cal-box',{
            data(){
                return{
                    number:0,
                }
            },
            template:`
            <div>
                <resultCpn :number='number'></resultCpn>
                <btnCpn @transFoo='transFoo' @addFoo='addFoo' @subFoo='subFoo'></btnCpn>
            </div>
            `,
            methods:{
                transFoo(inputNum){
                    this.number = inputNum;
                },
                addFoo(){
                    this.number--;
                },
                subFoo(){
                    this.number++;
                }
            }
        })
        Vue.component('resultCpn',{
            props:['number',],
            template:`
            <div>
                <h1>计数器：{{number}}</h1>
            </div>
            `
        })
        Vue.component('btnCpn',{
            data(){
                return{
                    inputNum:'',
                }
            },
            template:`
            <div>
                <button @click="$emit('addFoo')"> - </button>
                <button @click="$emit('subFoo')"> + </button>
                <input type='number' @change="$emit('transFoo',inputNum)" v-model.lazy='inputNum'/>
                
            </div>
            `
        })

        new Vue({
            el:"#app",
            data(){
                return {
                    msg:'hi',
                }
            },
            component:{

            },
        })
    </script>
</body>
</html>